<template>
  <a-layout class="question-detail-container">
    <!-- 头部区域优化 -->
    <a-layout-header class="header">
      <a-space direction="vertical" fill>
        <a-space align="center">
          <a-typography-title :heading="5" class="header-title">
            <router-link
              v-if="questionVo"
              :to="`/view/question/${questionVo.id}`"
              class="header-link"
            >
              {{ questionVo.title || "问题标题加载中..." }}
            </router-link>
            <span v-else>问题数据加载中...</span>
          </a-typography-title>

          <a-tag
            :color="getJudgeInfoColor(statusInfo)"
            size="large"
            class="status-tag"
          >
            {{ getJudgeInfoText(statusInfo) }}
          </a-tag>
        </a-space>

        <a-space>
          <a-typography-text type="secondary">
            <icon-clock-circle />
            提交时间：{{ formattedSubmitTime }}
          </a-typography-text>
        </a-space>
      </a-space>
    </a-layout-header>

    <!-- 主要内容区域优化 -->
    <a-layout-content class="content">
      <a-card title="执行结果" class="result-card" :bordered="false">
        <a-space direction="vertical" fill>
          <a-descriptions :column="3" layout="inline-horizontal" bordered>
            <a-descriptions-item label="通过用例">
              <a-typography-text strong>
                {{ passNum }} / {{ totalNum }}
              </a-typography-text>
            </a-descriptions-item>
            <a-descriptions-item label="执行用时">
              <a-typography-text strong> {{ time }} ms</a-typography-text>
            </a-descriptions-item>
            <a-descriptions-item label="内存消耗">
              <a-typography-text strong> {{ memory }} KB</a-typography-text>
            </a-descriptions-item>
          </a-descriptions>
        </a-space>
      </a-card>
    </a-layout-content>

    <!-- 底部代码区域优化 -->
    <a-layout-footer class="footer">
      <a-card title="提交的代码" :bordered="false">
        <a-space direction="vertical" fill>
          <a-descriptions :column="2" layout="inline-horizontal">
            <a-descriptions-item label="语言">
              <a-tag color="arcoblue">{{ language }}</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="提交时间">
              {{ formattedSubmitTime }}
            </a-descriptions-item>
          </a-descriptions>

          <div class="code-block-container">
            <CodeBlock :codeText="codeText" :lang="language" />
          </div>
        </a-space>
      </a-card>
    </a-layout-footer>
  </a-layout>
</template>

<script setup>
import { useRoute } from "vue-router";
import { QuestionControllerService } from "../../../generated";
import { computed, onMounted, ref } from "vue";
import message from "@arco-design/web-vue/es/message";
import CodeBlock from "@/components/CodeBlock.vue";
import { formatDistanceToNow, parseISO } from "date-fns";
import { zhCN } from "date-fns/locale";

const route = useRoute();
const questionSubmitId = route.params.id;
const questionSubmit = ref({});

// 计算属性
const codeText = computed(() => questionSubmit.value?.code || "加载中...");
const language = computed(() => questionSubmit.value?.language || "java");
const submitTime = computed(() => questionSubmit.value?.createTime || "");
const judgeInfo = computed(() => questionSubmit.value?.judgeInfo || null);
const time = computed(() => judgeInfo.value?.time || "-");
const memory = computed(() => judgeInfo.value?.memory || "-");
const passNum = computed(() => judgeInfo.value?.passNum || 0);
const totalNum = computed(() => judgeInfo.value?.totalNum || 0);
const statusInfo = computed(() => judgeInfo.value?.message || "加载中...");
const questionVo = computed(() => questionSubmit.value?.questionVO || null);

// 时间格式化
const formattedSubmitTime = computed(() => {
  if (submitTime.value) {
    return formatDistanceToNow(parseISO(submitTime.value), {
      addSuffix: true,
      locale: zhCN,
    });
  }
  return "";
});

const loadQuestionSubmit = async () => {
  try {
    const res = await QuestionControllerService.getJudgeResultUsingGet(
      questionSubmitId
    );
    if (res.code === 0) {
      questionSubmit.value = res.data;
    } else {
      message.error(res.message);
    }
  } catch (error) {
    message.error("获取提交详情失败");
  }
};

const getJudgeInfoColor = (message) => {
  if (message === "Accepted") {
    return "green";
  } else if (message === "Wrong Answer") {
    return "orange";
  } else {
    // 包括 null 和其他情况
    return "red";
  }
};

const getJudgeInfoText = (message) => {
  if (message === "Accepted") {
    return "通过";
  } else if (message === "Wrong Answer") {
    return "错误答案";
  } else {
    // 包括 null 和其他情况
    return "编译出错";
  }
};

onMounted(() => {
  loadQuestionSubmit();
});
</script>

<style scoped>
.question-detail-container {
  min-height: 100vh;
  background-color: var(--color-fill-2);
}

.header {
  background-color: var(--color-bg-2);
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
}

.header-title {
  margin-bottom: 0;
}

.header-link {
  color: var(--color-text-1);
  text-decoration: none;
}

.header-link:hover {
  color: var(--color-primary-light-2);
}

.content {
  padding: 20px;
}

.result-card {
  margin-bottom: 20px;
  border-radius: 4px;
}

.footer {
  padding: 0 20px 20px;
}

.code-block-container {
  margin-top: 16px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.status-tag {
  font-weight: 500;
  padding: 0 12px;
}
</style>
